<template>
	<view class="page">
		<view class="personal-box">
			<u-cell
				size="large"
				:border="false"
				title="头像"
				:customStyle="{height:'75px',borderBottom:'0.1px solid #eee'}"
				:isLink="true"
			>
				<template #value>
					<u-avatar :size="45" shape="square" src="../../static/logo.png"></u-avatar>
					<!-- <image src="" mode=""></image> -->
				</template>
			</u-cell>
		</view>
		<view class="userinfo-box">
			<u-cell
				size="large"
				:border="false"
				title="昵称"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
				:isLink="true"
				@click="handleGoNickName"
			>
				<template #value>
					<text>GVIM</text>
				</template>
			</u-cell>
			<u-cell
				size="large"
				:border="false"
				title="性别"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
				:isLink="true"
				@click="handleSetGender"
			>
				<template #value>
					<text>未知</text>
				</template>
			</u-cell>
			<u-cell
				size="large"
				:border="false"
				title="个性签名"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
				:isLink="true"
				@click="handleGoSignature"
			>
				<template #value>
					<text>Hello World</text>
				</template>
			</u-cell>
			<u-cell
				size="large"
				:border="false"
				title="地区"
				:customStyle="{height:'50px',borderBottom:'0.1px solid #eee'}"
			>
				<template #value>
					<text>中国云南省</text>
				</template>
			</u-cell>
		</view>
	</view>
	<u-action-sheet
		:actions="genderList" 
		:show="genderShow"
		:safeAreaInsetBottom="true"
		:round="true"
		cancelText="取消"
		@close="handleCloseGender"
	></u-action-sheet>
</template>

<script setup>
import {ref, reactive} from "vue"
let testSwitch = ref(true)
let genderShow = ref(false)
let genderList = reactive([
	{
		name: "保密",
	},
	{
		name: "男"
	},
	{
		name: "女"
	}
])
function handleGoNickName () {
	uni.navigateTo({
		url:"/pagesD/personal/nickname/index"
	})
}

function handleSetGender() {
	genderShow.value = true
}
function handleCloseGender() {
	genderShow.value = false
}

function handleGoSignature() {
	uni.navigateTo({
		url:"/pagesD/personal/signature/index"
	})
}

</script>

<style>
	page {
		background-color: #eeeeee;
	}
</style>

<style lang="scss" scoped>
	image {
		width: 100rpx;
		height: 100rpx;
	}
	.page{}
	.personal-box{
		margin-top: 30rpx;
		background-color: #ffffff;
	}
	.userinfo-box{
		background-color: #ffffff;
	}
</style>